<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>华为官网</title>
  <!-- 导入公共的css -->
  <link rel="stylesheet" href="./css/base.css">
  <!-- 导入主页的css -->
  <link rel="stylesheet" href="./css/index.css">
  <!-- 导入字体图标 -->
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <!-- 1. 导入插件 css 文件 -->
  <link rel="stylesheet" href="./swiper/swiper-bundle.css">
  <!-- 2. 导入插件 js 文件 -->
  <script src="./swiper/swiper-bundle.js"></script>
</head>

<body>
  <!-- 模块1：顶部导航 -->
  <div class="top-nav">
    <!-- 版心 -->
    <div class="container">
      <!-- 列表 -->
      <ul class="top-nav-ul">
        <!-- 添加类名，用于绑定点击事件 -->
        <li class="top-nav-group-btn">
          <!-- 字体图标使用时需要两个类名 -->
          <!-- 类名1：iconfont       设置字体图标  -->
          <!-- 类名2：iconfont-xxx   使用哪个图标  -->
          <i class="iconfont icon-header-linkgroup-new"></i>
          <a href="#">集团网站</a>
          <i class="iconfont icon-arrow-down"></i>
        </li>
        <li>
          <i class="iconfont icon-header-language-new"></i>
          <a href="#">选择区域/语言</a>
          <i class="iconfont icon-arrow-down"></i>
        </li>
        <li>
          <i class="iconfont icon-header-login-new"></i>
          <a href="#">登录</a>
        </li>
      </ul>
    </div>
  </div>
  <!-- 模块1：顶部导航 - 集团面板 -->
  <!-- hide 类名表示默认隐藏 -->
  <div class="top-nav-group hide">
    集团面板内容
  </div>
  <!-- 模块2：主体导航 -->
  <div class="navbar">
    <!-- 版心 -->
    <div class="container">
      <!-- 左边logo -->
      <h1 class="logo">
        <img src="./images/huawei_logo.png" alt="">
      </h1>
      <!-- 中间列表 -->
      <ul class="nav">
        <li>
          <a href="#">个人及家庭产品</a>
        </li>
        <li>
          <a href="#">商用产品及方案</a>
        </li>
        <li>
          <a href="#">服务支持</a>
        </li>
        <li>
          <a href="#">合作伙伴与开发者</a>
        </li>
        <li>
          <a href="#">关于华为</a>
        </li>
      </ul>
      <!-- 右边 在线购买和搜索框 -->
      <div class="nav-right">
        <a href="#" class="buy">
          <i class="iconfont icon-bags"></i>
          <span>在线购买</span>
          <i class="iconfont icon-arrow-down"></i>
        </a>
        <a href="#" class="search">
          <i class="iconfont icon-search"></i>
        </a>
      </div>
    </div>
  </div>
  <!-- 模块3：轮播图 -->
  <!-- 复制粘贴的：Swiper -->
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <!-- 修改成自己的图片 -->
        <img src="./images/banner01.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <!-- 修改成自己的图片 -->
        <img src="./images/banner02.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <!-- 修改成自己的图片 -->
        <img src="./images/banner03.jpg" alt="">
      </div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-pagination"></div>
  </div>
  <!-- 模块4：推荐产品 -->
  <div class="goods">
    <!-- 推荐产品标题 -->
    <h2>推荐信息</h2>
    <!-- 推荐产品楼层 -->
    <div class="goods-floor">
      <a class="a1" href="#">
        <img src="./images/goods_01.jpg" alt="">
      </a>
      <a class="a2" href="#">
        <img src="./images/goods_02.jpg" alt="">
      </a>
    </div>
    <!-- 推荐产品楼层 -->
    <div class="goods-floor">
      <a class="a2" href="#">
        <img src="./images/goods_03.jpg" alt="">
      </a>
      <a class="a1" href="#">
        <img src="./images/goods_04.jpg" alt="">
      </a>
    </div>
    <!-- 推荐产品楼层 -->
    <div class="goods-floor">
      <a class="a2" href="#">
        <img src="./images/goods_05.jpg" alt="">
      </a>
      <a class="a2" href="#">
        <img src="./images/goods_06.jpg" alt="">
      </a>
      <a class="a2" href="#">
        <img src="./images/goods_07.jpg" alt="">
      </a>
    </div>
  </div>

  <!-- 模块5：返回顶部 -->
  <a href="javascript:;" class="btn-go-top">
    <i class="iconfont icon-arrow-up"></i>
  </a>

  <!-- 复制粘贴的：Initialize Swiper -->
  <script>
    var swiper = new Swiper(".mySwiper", {
      slidesPerView: 1,
      spaceBetween: 30,
      loop: true,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
  </script>

  <!-- 引入 jQuery -->
  <script src="./jquery/jquery-1.12.4.js"></script>
  <script>
    // 给集团按钮添加点击事件
    $('.top-nav-group-btn').on('click', function () {
      // 给集团面板切换 hide 类实现切换过渡动画效果
      $('.top-nav-group').toggleClass('hide')
    })
  </script>
</body>

</html>